import React, {useState} from 'react';
import "@assets/css/ConatainHeader.scss";
export function ConatainHeader() {
    const [leftArr, setLeftArr] = useState([{
        name: "治愈",
        url: "",
    }, {
        name: "冒险",
        url: "",
    }, {
        name: "日本",
        url: ""
    }
    ]);
    const [rightArr, setRightArr] = useState([
        {
            name: "首页",
            url: "",
        }, {
            name: "论坛",
            url: "",
        }, {
            name: "分类",
            url: ""
        }
    ])
    return (
        <div className={'nav'}>
            <div className={'contain'}>
                <div className="left">
                    <div className={'left-first'}>
                        <span className={'iconfont  icon-xiasanjiaoxing'}></span>
                        <span>Umarutv</span>
                    </div>
                    {leftArr.map((ele, index) => <div
                        key={index}
                        className={'left-item'}>
                        {ele.name}
                    </div>)}

                </div>
                <div className="right">
                    <div className="right-item search">
                        <span className={'iconfont icon-sousuo'}></span>
                    </div>
                    {rightArr.map((ele, index) => {
                        return (<div key={index} className={'right-item'}>{ele.name}</div>)
                    })}
                    <div className="right-item userImg">
                        <span className={'iconfont icon-icon-test-copy'}></span>
                    </div>
                </div>
            </div>

        </div>
    )
}